<template>
	<view class="page_wrapper">
		<view class="user_info_block">
			<view class="avatar_block">
				<button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
					<template v-if="userInfo.avatar">
						<image class="avatar" :src="userInfo.avatar"></image>
					</template>
					<template v-else>
						<view class="upload_avatar">点击上传头像</view>
					</template>
				</button>
			</view>
			<view class="usrname_block">
				<view class="name_title">昵称：</view>
				<input type="nickname" class="name-input" name="nickname" :value="userInfo.nickName" bindchange="onInput" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="bottom_block">
			<view class="reg_btn" @click="saveData()">注册登录</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				userInfo: {
					avatar: '',
					customerId: '',
					depositNum: '',
					mobile: '',
					nickName: '',
					waterNum: ''
				}
			}
		},
		onInput(e) {
			const { value } = e.detail
			console.log('输入昵称', value);
			this.userInfo.nickName = value
		},
		// 选择头像
		onChooseAvatar(e) {
			console.log('选择头像', e);
			const { avatarUrl } = e.detail
			console.log(avatarUrl)
			this.userInfo.avatar = avatarUrl
		},
		methods: {
			uploadAvatar() {
				
			},
			saveData() {
				uni.showLoading()
				// 上传头像信息
				const wechatOpenId = getApp().globalData.wechatOpenId
				request.uploadAvatar(this.userInfo.avatar)
					.then(res => {
						// 保存数据
						const data = {
							name: this.userInfo.nickName,
							nickName: this.userInfo.nickName,
							mobileNo: '',
							email: '',
							avatarUrl: res,
							wechatOpenId: wechatOpenId,
							roleIds: ',0,'
						}
						
						request.postJson('/users', data)
							.then(res2 => {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '保存成功'
								})
								uni.navigateBack()
							}).catch(err2 => {
								uni.hideLoading()
								console.log(err)
								uni.showToast({
									icon: 'none',
									title: '保存数据失败'
								})
							})
					}).catch(err => {
						uni.hideLoading()
						console.log(err)
						uni.showToast({
							icon: 'none',
							title: '保存头像信息失败'
						})
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.user_info_block{
			flex: 1;
			display: flex;
			flex-direction: column;
			.avatar_block{
				height: 150px;
				background-color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				.avatar-wrapper{
					height: 100px;
					background-color: white;
					border: none;
					outline: none;
					.avatar{
						width: 100px;
						height: 100px;
						border-radius: 50px;
					}
					.upload_avatar{
						color: #666666;
						font-size: 12px;
						width: 100px;
						height: 100px;
						border-radius: 50px;
						background-color: #c2c2c2;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				.avatar-wrapper::after{
					border: none;
				}
			}
			.usrname_block{
				height: 50px;
				display: block;
				border-top: 1px solid #f2f2f2;
				border-bottom: 1px solid #f2f2f2;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 20px;
				padding-right: 20px;
				color: #333333;
				.name_title{
					width: 70px;
				}
				.name-input{
					flex: 1;
					text-align: right;
				}
			}
		}
		.bottom_block{
			height: 70px;
			display: flex;
			justify-content: center;
			align-items: center;
			.reg_btn{
				color: white;
				width: 90%;
				height: 40px;
				border-radius: 6px;
				background-color: #67C23A;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
